import { ethers } from "ethers"

function List({ toggleCreate, fee, provider, factory }) {

  const listHandler = async (form) => {
      const name = form.get("name")
      const ticker = form.get("ticker")
      const signer = await provider.getSigner()
      const transaction = await factory.connect(signer).createToken(name, ticker, { value: fee })
      await transaction.wait()
      toggleCreate() 
  }


  return (
    <div className="list">
      <h2>List A New Token</h2>
      <div className="list_description">
        <p>
           fee: {ethers.formatEther(fee)} ETH
        </p>
      </div>
      <form action={listHandler}>
        <label>Token Details</label>
        <input type="text" name="name" placeholder="Token Name" />
        <input type="text" name="ticker" placeholder="Token ticker" />
        <input type="submit" value={"[ list ]"} />
      </form>

      <button className="btn--fancy" onClick={toggleCreate}>[ cancel ]</button>
    </div>
  );
}

export default List;